﻿<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <title>TODO List</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script>
        var model = {
            user: "Jerry",
            items: [
                    { "action": "编写方案文档", done: false },
                    { "action": "面试技术人员", done: false },
                    { "action": "向老板汇报", done: true },
                    { "action": "召开部门会议", done: false }]
        };
        var todoApp = angular.module('todoApp', []);

        todoApp.controller("ToDoCtrl", function ($scope) {
            $scope.todo = model;

            $scope.incompleteCount = function () {
                var count = 0;
                angular.forEach($scope.todo.items, function (item) {
                    if (!item.done)
                        count++;
                });
                return count;
            };

            $scope.warningLevel = function () {
                return $scope.incompleteCount() < 3 ? "label-success" : "label-warning";
            };

            $scope.addNewItem = function (actionText) {
                $scope.todo.items.push({ "action": actionText, done: false });
            };
        });

        todoApp.filter("checkedItems", function () {
            return function (items, showComplete) {
                var resultArr = [];
                angular.forEach(items, function (item) {
                    if (item.done == false || showComplete == true) {
                        resultArr.push(item);
                    }
                });
                return resultArr;
            };
        });
    </script>

</head>
<body ng-controller="ToDoCtrl">
    <div class="container">
        <div class="page-header">
            <h1>
                {{todo.user}}的待办事务列表
                <span class="label label-default" ng-hide="incompleteCount()==0" ng-class="warningLevel()">
                    {{incompleteCount()}}
                </span>
            </h1>
        </div>
        <div class="panel">
            <div class="input-group">
                <input class="form-control" ng-model="actionText" />
                <span class="input-group-btn">
                    <button class="btn btn-default" ng-click="addNewItem(actionText)">添加</button>
                </span>
            </div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>描述</th>
                        <th>完成</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in todo.items | checkedItems:showComplete | orderBy:'action'">
                        <td>{{item.action}}</td>
                        <td><input type="checkbox" ng-model="item.done" /></td>
                    </tr>
                </tbody>
            </table>

            <div class="checkbox-inline">
                <label>
                    <input type="checkbox" ng-model="showComplete" />显示已完成事项
                </label>
            </div>
        </div>
    </div>
</body>
</html>
